<template>
    <div class="out">
      <div class="out_inner">
        <mySwiper></mySwiper>
        <div class="icon_out">
          <ul class="small_icon_ul">
            <li v-for="item in midIcon">
              <a :href="item.urlDetail">
                <img :src="item.url" alt="" class="img"><br>
                {{item.msg}}
              </a>
            </li>
          </ul>
          <div class="loop">
          <span class="img_out2">
            <img src="../../static/img/message.png" alt="">
          </span>
            <div class="info_out">
              <loopSwiper></loopSwiper>
            </div>
            <span class="img_out" @click="show_layer">
              <img src="../../static/img/wechat.png" alt="">
            </span>
          </div>
          <!--<a href="goodDetail.html">注册</a>-->
        </div>
        <div class="hot_goods">
          <div class="goods_top">
            <span>热门借款</span>
            <router-link to="/product" class="goods_link">查看更多 ></router-link>
          </div>
          <ul class="hot_ul">
            <li v-for="item in hotList" >
              <div class="productUrl" @click="run_detail(item.guid)" :data-id="item.guid">
                <span  class="hot_out">
                  <span v-for="item2 in JSON.parse(item.images)"><img class="img_left" :src="item2.imageUrl" alt=""></span>
                  <span class="hot_info">
                    <span class="hot_t">{{item.productName}}</span><br>
                    <span class="hot_h">最高：{{item.maxnumAmount}}</span>
                    <img class="img_right" src="../../static/img/icon2.png" alt="">
                  </span>
                </span>
                <span class="term">
                  {{item.productDesc}}
                </span>
              </div>
            </li>
            <!--<li v-for="item in hotList" >-->
              <!--<div class="productUrl" @click="run_detail(item.guid)" :data-id="item.guid" >-->
                <!--<span  class="hot_out">-->
                  <!--<span v-for="item2 in JSON.parse(item.images)"><img class="img_left" :src="item2.imageUrl" alt=""></span>-->
                  <!--<span class="hot_info">-->
                    <!--<span class="hot_t">{{item.productName}}</span><br>-->
                    <!--<span class="hot_h">最高：{{item.maxnumAmount}}</span>-->
                    <!--<img class="img_right" src="../../static/img/icon2.png" alt="">-->
                  <!--</span>-->
                <!--</span>-->
                <!--<span class="term">-->
                  <!--{{item.productDesc}}-->
                <!--</span>-->
              <!--</div>-->
            <!--</li>-->
          </ul>
        </div>
      </div>
      <!--遮罩层-->
      <div class="wechat_layer">
        <div class="layer_inner">
          <div class="layer_title">
            关注小金鱼微信公众号<br>
            <span>微信公众号：小金鱼服务</span>
            <i class="el-icon-close"></i>
          </div>
          <div class="layer_introduction">海量新鲜资讯，独家秒过秘籍，你<br>想要的这里都有</div>
          <img src="../../static/img/mid-icon1.png" alt=""><br>
          <span class="btn" :data-clipboard-text="clipboardInfo" @click="hide_layer">复制公众号</span>
        </div>
      </div>
      <div class="wechat_click" @click="clickHide">
        <div class="wechat_click_icon">
          <div class="wechat_choose">选择要使用的应用</div>
          <img src="../../static/img/icon_name.png" alt="">
          <img src="../../static/img/icon_name.png" alt="">
        </div>
        <div class="copy_success">公众号复制成功</div>
      </div>
    </div>
</template>

<script>
    import mySwiper from './swiper'
    import loopSwiper from './swiper2'
    import Clipboard from 'clipboard'
    import {urlList} from '../assets/urlList.js'//引入接口地址文件

    function GetQueryString(name)
    {
      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
      var r = decodeURI(window.location.search.substr(1)).match(reg);
      if(r!=null)return  unescape(r[2]); return null;
    }

    var channelNum = GetQueryString("channelNum")
    if(!channelNum){
      channelNum = 0
    }

    var params = new URLSearchParams();

    params.append('currentPage',1);       //你要传给后台的参数值 key/value
    params.append('showCount', 10);
    // 原生获取cookie
     function getCookie(cname)
     {
       var name = cname + "=";
       var ca = document.cookie.split(';');
       for(var i=0; i<ca.length; i++)
       {
         var c = ca[i].trim();
         if (c.indexOf(name)==0) return c.substring(name.length,c.length);
       }
       return "";
     }

    let auth = getCookie('USER_P2P_H5_COOKIE');//获取cookie
    params.append('auth', auth);

    var params2 = new URLSearchParams();
    params2.append('auth',auth);

    export default {
      name: "index",
      components:{mySwiper,loopSwiper},
      data() {
        return{
          midIcon:[
            {
              url:'./static/img/mid-icon1.png',
              msg:'99%下款',
              urlDetail:''
            },
            {
              url:'./static/img/mid-icon2.png',
              msg:'信用卡',
              urlDetail:''
            },
            {
              url:'./static/img/mid-icon3.png',
              msg:'拒就赔',
              urlDetail:''
            },
            {
              url:'./static/img/mid-icon4.png',
              msg:'新口子',
              urlDetail:''
            }
          ],
          hotList:[],
          pageNum:1,
          clipboardInfo:'小金鱼服务',
          tag:true,//防止多次刷新
          localTag:true,
          dataSend:{
            currentPage:this.pageNum,
            showCount:10
          }
        }
      },
      methods:{
        //获取cookie
        getCookie(cname){
          let name = cname + "=";
          let ca = document.cookie.split(';');
          for(let i=0; i<ca.length; i++)
          {
            let c = ca[i].trim();
            if (c.indexOf(name)==0) return c.substring(name.length,c.length);
          }
          return "";
        },
        hotPost:function() {
          console.log(urlList.hotList)
          let _this = this;
          this.$ajax({
            method:'post',
            url:'/api/homepage/hot/products.html?channelNum='+channelNum,
            // data:{
            //   currentPage:_this.pageNum,
            //   showCount:10
            // }
            data:params
          }).then(function(res) {
            console.log(res.data);
            _this.hotList =res.data.products;
          }).catch(function(res) {
            console.log('出错'+res);
          })
        },
        copyWechat:function() {

        },
        show_layer() {
          $('.wechat_layer').show();
        },
        hide_layer() {
          $('.wechat_layer').hide();
          $('.wechat_click').show();
        },
        clickHide() {
          $('.wechat_click').hide();
        },
        run_detail(id) {
          //判断是否有cookie值后期直接放开即可

          if(this.getCookie('USER_P2P_H5_COOKIE')){
            window.location.href='goodDetail.html?id='+id+'&channelNum='+channelNum
          }else{
              this.hotList = [];
              window.location.href = 'login.html?channelNum='+channelNum
          }
          // window.location.href='goodDetail.html?id='+id
        }
      },
      mounted() {
        let _this = this;
        let Oout = document.querySelector('.out');//out_inner滚动不能识别
        let Oinner = document.querySelector('.out_inner');
        let clipboard = new Clipboard('.btn');
        //获取首页icon以及跳转页面
        _this.$ajax({
          url:'/api/homepage/configs.html?channelNum='+channelNum,
          method:'post',
          data:params2
        }).then(function(res) {
          console.log('icon内容',res)
          res.data.configs.forEach(function(value,index) {
            console.log(value.discription)
            _this.midIcon.forEach(function (value2,index2) {
              if(value2.msg == value.discription ) {
                value2.urlDetail = value.configValue
              }
            })
          })
        })
        $('.wechat_layer').height(window.screen.height)
        $('.wechat_click').height(window.screen.height)
        Oout.addEventListener('scroll', function() {
          if(document.documentElement.clientHeight+Oout.scrollTop>Oinner.offsetHeight){
            if(_this.tag == true){
              _this.pageNum++;
              _this.tag = false;
              params.set('currentPage',_this.pageNum);
              _this.$ajax({
                method:'post',
                url:'/api/homepage/hot/products.html?channelNum='+channelNum,
                data:params
              }).then(function(res) {
                res.data.products.forEach(function(value,index) {
                _this.hotList.push(value)
                })
                  _this.tag=true;
                console.log(res);
              }).catch(function(res) {
                console.log('出错'+res);
              })
            }
          }
        })
        this.hotPost();
//        this.check_localstorage2();
      }
    }
</script>

<style scoped>
  .out{
    height:90%;
    overflow: scroll;
    font-size:14px;
  }
  .out .img{
    width:40px;
    height:40px;
  }
  .out ul{
    display: flex;
    display: -webkit-flex;
    flex-direction:row;
    justify-content: space-around;
    text-align: center;
  }
  .out .hot_ul{
    display: flex;
    display: -webkit-flex;
    flex-direction:row;
    justify-content: space-between;
    text-align: center;
    width: 98%;
    margin: auto;
  }
  .icon_out li{
    font-size: 12px;
    color:#666666;
  }
</style>
